<template>
	<div class="ins">
		<div class="ins_top">
			<div class="title">入库单查询</div>
			<div class="query">
				<div class="query_text">查询</div>
				<div class="blocks">
					<div class="demo-date-picker">
						<div class="date">入库时间</div>
						<div class="block">
							<el-date-picker v-model="value1" type="date" placeholder="年 / 月 / 日" />
						</div>
					</div>
					<div class="card">入库单号</div>
					<div>
						<el-input v-model="input"/>
					</div>
					<div class="master">货主姓名</div>
					<div>
						<el-input v-model="input"/>
					</div>
					<div class="button"><el-button type="info">查询</el-button></div>
				</div>
			</div>
			<div class="cards">
				<el-table ref="multipleTableRef" :data="tableData" style="width: 100%"
					@selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55" />
					<el-table-column prop="card" label="入库单单号" width="180">
						<template #default="scope">{{ scope.row.date }}</template>
					</el-table-column>
					<el-table-column prop="settle" label="结算员" />
					<el-table-column prop="master" label="货主" />
					<el-table-column prop="date" label="业务时间" width="180" />
					<el-table-column prop="spay" label="应收款" />
					<el-table-column prop="tpay" label="实际收款" />
					<el-table-column prop="hpay" label="力资费" />
					<el-table-column prop="epay" label="其他费用" />
					<el-table-column prop="state" label="入库单状态" />
					<el-table-column prop="delete" label="是否删除" />
				</el-table>
				<div class="history">没有相关记录!</div>
			</div>
		</div>
		<div class="title">入库明细信息</div>
		<div class="message">
			<div class="message_inps">
				<div class="message_inps_text">入库单单号</div>
				<el-input class="in" v-model="input"/>
			</div>
			<div class="message_inps">
				<div class="message_inps_text">货主</div>
				<el-input class="in" v-model="input"/>
			</div>
			<div class="message_inps">
				<div class="message_inps_text">力资费</div>
				<el-input class="in" v-model="input"/>
			</div>
			<div class="message_inps">
				<div class="message_inps_text">业务时间</div>
				<div class="block">
					<el-date-picker v-model="value1" type="date" placeholder="年 / 月 / 日" />
				</div>
			</div>
			<div class="message_inps">
				<div class="message_inps_text">最后编辑时间</div>
				<div class="block">
					<el-date-picker v-model="value1" type="date" placeholder="年 / 月 / 日" />
				</div>
			</div>
			<div class="message_inps">
				<div class="message_inps_text">单据状态</div>
				<el-input class="in" v-model="input"/>
			</div>
			<div class="message_inps">
				<div class="message_inps_text">状态</div>
				<el-input class="in" v-model="input"/>
			</div>
			<div class="remarks">
				<div class="remarks_text">备注</div>
				<input class="remarks_in" />
			</div>
			<div class="message_inps">
				<div class="message_inps_text"></div>
				<el-button class="submit" type="primary">提交</el-button>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import {
		ref
	} from 'vue'
	import type {
		ElTable
	} from 'element-plus'
	interface User {
		date: string
		name: string
		address: string
	}
	const input = ref('')
	const multipleTableRef = ref < InstanceType < typeof ElTable >> ()
	const multipleSelection = ref < User[] > ([])
	const toggleSelection = (rows ? : User[]) => {
		if (rows) {
			rows.forEach((row) => {
				// TODO: improvement typing when refactor table
				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
				// @ts-expect-error
				multipleTableRef.value!.toggleRowSelection(row, undefined)
			})
		} else {
			multipleTableRef.value!.clearSelection()
		}
	}
	const handleSelectionChange = (val: User[]) => {
		multipleSelection.value = val
	}
	const tableData = [{
		card: '11122233',
		settle: '小王',
		master: '小黑',
		date: '2016-08-06 10:16:03',
		spay:'1',
		tpay:'1',
		hpay:'1',
		epay:'1',
		state:'入库完成',
		delete: '否',
	}, {
		card: '00002233',
		settle: '小王',
		master: '白玉',
		date: '2018-09-30 18:23:46',
		spay:'1',
		tpay:'1',
		hpay:'1',
		epay:'1',
		state:'结算完成',
		delete: '否',
	}, ]
	//时间
	const value1 = ref('')
	const value2 = ref('')

	const shortcuts = [{
			text: 'Today',
			value: new Date(),
		},
		{
			text: 'Yesterday',
			value: () => {
				const date = new Date()
				date.setTime(date.getTime() - 3600 * 1000 * 24)
				return date
			},
		},
		{
			text: 'A week ago',
			value: () => {
				const date = new Date()
				date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
				return date
			},
		},
	]

	const disabledDate = (time: Date) => {
		return time.getTime() > Date.now()
	}
</script>

<style>
	.ins{
		width: 1065px;
		height: 500px;
		overflow: auto;
	}
	.cards {
		border: 1px solid lightgrey;
	}

	.history {
		color: #666666;
		font-size: 14px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.demo-date-picker {
		display: flex;
		flex-direction: row;
		width: 33%;
		padding: 0;
		flex-wrap: wrap;
	}

	.demo-date-picker .block {
		padding: 10px 0;
		text-align: center;
		/* border-right: solid 1px var(--el-border-color); */
		flex: 1;
	}

	.demo-date-picker .block:last-child {
		border-right: none;
	}

	.demo-date-picker .demonstration {
		display: block;
		color: var(--el-text-color-secondary);
		font-size: 14px;
		margin-bottom: 20px;
	}

	.blocks {
		display: flex;
		width: 100%;
		color: #333333;
		font-size: 14px;
		align-items: center;
		background-color: #f7f7f7;
	}

	.date {
		padding-left: 10px;
		display: flex;
		align-items: center;
	}
	.card{
		margin-right: 20px;
	}
	.master{
		margin: 0 20px;
	}
	.button{
		margin-left: 20px;
	}
	.message_inps{
		display: flex;
		padding: 3px 24px;
		color: #666666;
		font-size: 14px;
		border-bottom: 1px solid lightgrey;
	}
	.message_inps_text{
		width: 164px;
		display: flex;
		align-items: center;
	}
	.in{
		width: 223.6px;
	}
	.title{
		color: #2E6095;
		font-size: 14px;
		padding: 10px 0 10px 25px;
		background-color: #f7f7f7;
	}
	.query_text{
		color: #333333;
		font-size: 14px;
		padding: 10px 0 10px 25px;
	}
	.ins_top{
		border: 1px solid lightgrey;
		margin-bottom: 10px;
	}
	.message{
		margin-top: 10px;
		border: 1px solid lightgrey;
		background-color: #f7f7f7;
	}
	.remarks{
		height: 160px;
		display: flex;
		align-items: center;
		padding-left: 24px;
		color: #666666;
		font-size: 14px;
		border-bottom: 1px solid lightgrey;
		background-color: #f7f7f7;
	}
	.remarks_text{
		width: 164px;
	}
	.remarks_in{
		margin: 3px 0;
		width: 446px;
		height: 155px;
		border: 1px solid lightgrey;
	}
	.submit{
		width: 105px;
	}
</style>
